<template>
  <main-content
    title="客群管理"
    :inner-padding="false"
    class="category-main-content"
  >
    <l-r-content-index v-loading="loading" :is-drag="true">
      <template #title>
        <div class="side-title-inner">
          客群分组
          <el-button type="primary" @click="addGroup" v-has="['120107']">
            <el-icon>
              <Plus />
            </el-icon>
            <span style="margin-left: 10px">新增分组</span>
          </el-button>
        </div>
      </template>

      <template #side-content>
        <!-- <el-input v-model="filterText" placeholder="Filter keyword" /> -->
        <!-- :currentNodeKey="treeCurrentId" -->

        <LeftTree
          ref="LeftTreeRef"
          :treeData="treeData"
          :treeProps="treeProps"
          :defaultExpandedKeys="defaultExpandedKeys"
          :disableSelect="disableSelect"
          :currentNodeKey="treeCurrentId || 'all'"
          @getTreeNodeId="getTreeNodeId"
          @add="add"
          @edit="edit"
          @del="del"
          :littlePointPermissions="['120110', '120111', '120112']"
          :buttonAdd="['120110']"
          :buttonEdit="['120111']"
          :buttonDel="['120112']"
        ></LeftTree>
      </template>

      <template #default>
        <GroupList
          :categoryId="treeCurrentId"
          ref="groupListRefs"
          @setNodeId="
            (nodeId) => {
              treeCurrentId = nodeId;
            }
          "
        ></GroupList>
      </template>
    </l-r-content-index>
    <addCustomersGroup
      :showDialog="showDialog"
      :treeCurrentId="addTreeCurrentId"
      :treeSelectData="addTreeData"
      :addData="addData"
      @confirm="confirm"
      @cancel="cancel"
    ></addCustomersGroup>
  </main-content>
</template>
<script lang="ts">
export default {
  name: "CustomerGroup",
  beforeRouteEnter(to, from, next) {
    //客群明细返回刷新
    if (from.name === "customerDetail") {
      next((vm: any) => {
        vm.$refs["groupListRefs"].onSearch();
      });
    } else {
      next();
    }
  },
};
</script>
<script lang="ts" setup>
import GroupList from "./groupList.vue";
import LeftTree from "@/components/LRcontent/LeftTree.vue";
import CustomerApi from "@/api/customerApi";
import addCustomersGroup from "./component/addCustomersGroup.vue";
import { async } from "@antv/x6/lib/registry/marker/async";
import { Ref } from "vue";
// import { deepClone } from "@/utils";

const hrefSelectorVisible: Ref<boolean> = ref(true);

const loading = ref(false);
const disableSelect = ref(false); // 禁止选中
// const currentNodeKey = ref("all");
const treeData = ref([] as any);
const addTreeData = ref([] as any);
const addData = ref({
  parentId: "" as string | number,
  name: "",
  nodeType: 0,
} as any);
const treeProps = ref({
  label: "name",
});
const LeftTreeRef = ref();
const treeCurrentId = ref("");
const addTreeCurrentId = ref("");
const showDialog = ref(false);
const defaultExpandedKeys = ref([] as any);
const treeAll = ref([
  {
    id: "all",
    name: "全部",
    children: [],
  },
]);

const getTreeNodeId = (data: any) => {
  if (data.nodeType == 1 && data.children) {
    LeftTreeRef.value.setCurrentKey(treeCurrentId.value); // 设置选中
    return;
  }
  if (data.id == "all") {
    treeCurrentId.value = "";
    return;
  }
  treeCurrentId.value = data.id;
};
// 获取左侧的树结构
const getCustomersGroupTree = async () => {
  let rs = await CustomerApi.getCustomersGroupTree({ nodeType: "" });
  if (rs.code === 200) {
    treeData.value = [...treeAll.value, ...rs.payload];
    addTreeData.value = rs.payload;
  }
};
const addGroup = () => {
  showDialog.value = true;
  addTreeCurrentId.value = "";
};
const add = async (data: any) => {
  addTreeCurrentId.value = data.id;
  showDialog.value = true;
};
const edit = async (data: any) => {
  addData.value = {
    id: data.id,
    parentId: data.parentId ? data.parentId : "",
    name: data.name,
    nodeType: data.nodeType,
  };
  showDialog.value = true;
};
const del = (data: any) => {
  ElMessageBox.confirm(`是否删除${data.name}`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    let rs = await CustomerApi.delCustomersGroupTree({ id: data.id });
    if (rs.code === 200) {
      ElMessage.success("删除成功");
      if (data.id == treeCurrentId.value) {
        treeCurrentId.value = "";
      }
      LeftTreeRef.value.removeTreeNode(data); // 删除树节点的数据
    }
  });
};
const confirm = async (parentId: string) => {
  await getCustomersGroupTree();
  treeCurrentId.value = parentId;
  defaultExpandedKeys.value = [parentId];
};
const cancel = () => {
  showDialog.value = false;
  addData.value = {
    id: null,
    parentId: "",
    name: "",
    nodeType: 1,
  };
};

const store = useStore();
const groupListRefs = ref();
// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  async () => {
    await getCustomersGroupTree();
    groupListRefs.value.onSearch();
  },
  {
    deep: true,
  }
);

onMounted(async () => {
  await getCustomersGroupTree();
});
</script>

<style scoped lang="scss">
.side-title-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.category-item {
  margin-top: 6px;

  .rank-item {
    display: flex;
    align-items: center;

    .name {
      font-size: 14px;
      font-weight: 500;
      color: var(--el-color-primary);
      margin-bottom: 5px;
    }

    .desc {
      font-size: 12px;
      color: var(--el-color-info-dark-2);
    }
  }

  .left {
    width: 50px;
    height: 50px;
    margin-right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    overflow: hidden;
    border-radius: 5px;
  }

  .right {
    flex: 1;
  }
}

:deep(.main-content-tab-bar-wrapper) {
  margin-bottom: 0;
}
</style>
